<template>
  <el-dialog
    :visible="dialogVisible"
    title="预览"
    width="60%"
    center
    :before-close="close"
    :modal="false"
  >
    <!-- 图片 -->
    <el-image
      v-if="fileType === 'image'"
      :src="fileUrl"
      style="width: 100%; height: 400px"
      fit="contain"
    >
      <div slot="placeholder" class="image-slot">
        加载中<span class="dot">...</span>
      </div>
    </el-image>
    <!-- 视频 -->
    <video
      v-if="fileType === 'video'"
      width="100%"
      height="400px"
      controls
      style="object-fit: cover"
    >
      <source :src="fileUrl" type="video/mp4" />
      您的浏览器不支持Video标签。
    </video>
    <!-- pdf,word,ppt等 -->
    <iframe
      v-if="fileType === 'application'"
      :src="`http://ow365.cn/?i=24541&furl=${fileUrl}`"
      frameborder="0"
      style="object-fit: cover;width:100%;height:30rem"
    ></iframe>
    <!-- text等 -->
    <iframe
      v-if="fileType === 'text'"
      :src="fileUrl"
      frameborder="0"
      width="100%"
      height="100%"
      style="object-fit: cover"
    ></iframe>
    <!-- 普通的地图地点 -->
    <Map
      v-if="fileType === 'map'"
      :centerPoint="centerPoint"
    ></Map>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">关闭</el-button>
      <el-button
        v-if="deleteFunc ? true : false"
        type="primary"
        @click="deleteFunc"
        >删除</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import Map from '../../OrderManagement/Map'
export default {
  components:{
    Map
  },
  props: {
    dialogVisible: {
      type: Boolean,
    },
    fileType: {
      type: String, //{image,video,application,map,text}
    },
    fileUrl: {
      type: String,
    },
    // 用于删除的时候才传
    deleteFunc: {
      type: Function,
    },
    close: {
      type: Function,
    },
    // 用于map时才传
    centerPoint: {
      type: Object,
    },
  },
  watch: {
    fileUrl(url) {
      console.log("url: ", url);
    },
    // centerPoint(centerPoint){
    //   console.log('centerPoint: ', centerPoint);
    // }
  },
};
</script>